<template>
    <div class="order-view" style="color: aqua;">
        <el-button type="text" @click="stockOutDetail(data.transferCode)">{{
            data.transferCode
        }}</el-button>
        <el-dialog title="调拨单 - 详情" :visible.sync="dialogVisible" width="50%" :before-close="handleClose"
            :modal-append-to-body="false" :append-to-body="true">
            <div>
                <template>
                    <div>
                        <el-descriptions>
                            <el-descriptions-item label="单据编号" content-class-name="my-content">{{
                                data.transferCode
                            }}</el-descriptions-item>
                            <el-descriptions-item label="调出仓库"><span style="color: green;">{{
                                data.houseOutName
                                    }}</span></el-descriptions-item>
                            <el-descriptions-item label="调入仓库"><span style="color: red;">{{
                                data.houseOutName
                                    }}</span></el-descriptions-item>
                            <el-descriptions-item label="当前状态">
                                <span :style="getStatusStyle(data.status)">
                                    {{ getStatusText(data.status) }}
                                </span>
                            </el-descriptions-item>
                            <el-descriptions-item label="业务员"><span style="color: red;">{{
                                data.createBy
                                    }}</span></el-descriptions-item>
                            <el-descriptions-item label="发起时间">{{ parseTime(data.createDate, '{y}-{m}-{d}') }}</el-descriptions-item>
                        </el-descriptions>
                    </div>
                </template>
                <div class="transfer-details-title">调拨明细</div>
                <el-table :data="orderDetail" border style="width: 100%">
                    <el-table-column prop="goodsCode" label="商品编号">
                    </el-table-column>
                    <el-table-column prop="goodsName" label="商品名">
                    </el-table-column>
                    <el-table-column label="调拨数量">
                        <template slot-scope="scope">
                            <span style="color: orange;">{{ scope.row.goodsNum }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="unitName" label="单位">
                    </el-table-column>
                </el-table>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { getTransfer } from "@/api/store/transfer";

export default {
    props: {
        data: {
            type: Object,
            default: () => ({})
        }
    },
    data() {
        name: "OrderView";
        return {
            dialogVisible: false,
            orderDetail: [],
        };
    },
    methods: {
        handleClose(done) {
            done();
        },
        stockOutDetail(transferCode) {
            this.dialogVisible = true;
            getTransfer(transferCode).then(response => {
                this.orderDetail = response.data.detailList;
            });
        },
        getStatusText(status) {
            const statusMap = {
                0: '已提交',
                1: '待出库',
                2: '待入库',
                3: '已完成',
            };
            return statusMap[status] || '未知状态';
        },
        getStatusStyle(status) {
            const statusMap = {
                0: 'color: orange;',
                1: 'color: green;',
                2: 'color: #409eff;',
                3: 'color: red;',
            };
            return statusMap[status] || 'color: black;';

        },
    },
    mounted() {

    }

};
</script>
<style>
.my-content {
    color: #409eff;
}
</style>
